<template>
  <div class="home">
    <div class="home">
        <div @click="isShow" class="tab"> 底部弹框 {{flag}}</div>
        <div @click="isbox" class="tab"> 关闭圆角 {{box}}</div>
    </div>
    <pupop :flag="flag" :isbox="box" />
  </div>
</template>

<script>
// @ is an alias to /src
import pupop from '@/components/pupop.vue'

export default {
  name: 'Home',
  components: {
    pupop
  },
  data(){
      return{
          flag:false,
          box:true
      }
  },
  methods:{
      isShow(){
          this.flag = !this.flag;
          if(!this.box){
              this.box = !this.box;
          }
      },
      isbox(){
          this.box = !this.box;
        //   if(!this.flag){
        //       this.flag = !this.flag;
        //   }
      },
  }
}
</script>
<style lang="less">
    .compatible(@str,@time){
        transition: @str @time;
        -ms-transform:@str @time; /* IE 9 */
        -moz-transform:@str @time; /* Firefox */
        -webkit-transform:@str @time; /* Safari 和 Chrome */
        -o-transform:@str @time; /* Opera */
    }
    .home{
        display: flex;
        flex-wrap: ;
        justify-content: space-around;
        .tab{
            position: relative;
            z-index: 9999;
            padding: 5px 20px;
            border: 1px solid skyblue;
        }
    }
</style>
